MyDocument.render - Code Metrics - Inspection of "[Improve] Supported export with static page" - DeKal/portfolio-next-js - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Pull Request — master (#425)

by Huu-Phat

created 2021-01-22 16:05 UTC

MyDocument.render B

↳ Parent: Project

Complexity

Conditions

Size

Total Lines	80
Code Lines	63

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	63
dl	0
loc	80
rs	8.2109
c	0
b	0
f	0
cc	1

How to fix Long Method

import React from 'react'
import Document, { Html, Head, Main, NextScript } from 'next/document'
/*
 * Some notes:
 * 1) _document.js will load on server side -> all this meta tag will be fetched by Scraper of Facebook, Linkedin, ...
 * 2) og:image need to be change name in order for FB to reload the new preview image
 * 3) sharing on staging env wont work, because og:url is set to main page
 */
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <meta
            name="viewport"
            content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
          />
          <meta property="og:title" content="DeKal | Portfolio" />
          <meta property="og:type" content="website" />
          <meta
            property="og:description"
            content="Dekal's Portfolio and Blog"
          />
          <meta
            property="og:image"
            content="https://phatho-folio.now.sh/images/cover-img.png"
          />
          <meta
            property="og:image:secure_url"
            content="https://phatho-folio.now.sh/images/cover-img.png"
          />
          <meta property="og:url" content="https://phatho-folio.now.sh/" />
          <meta property="og:site_name" content="DeKal Portfolio" />
          <meta property="og:image:alt" content="DeKal Portfolio" />
          <meta
            name="google-site-verification"
            content="ofwBFRuFL3aycSJjDcrhc8hWEPKuJ7LkNCLUrsB0Sj4"
          />
          <meta name="robots" content="index,follow" />
          <meta name="googlebot" content="index,follow" />
          <meta name="theme-color" content="#ffffff" />
          <link rel="icon" href="/favicon.ico" />
          <link rel="apple-touch-icon" href="/icons/Icon-64.png" />
          <link
            rel="preload"
            href="fonts/ip/font/ip.woff"
            as="font"
            crossOrigin=""
          />
          <link
            href="/icons/Icon-32.png"
            rel="icon"
            type="image/png"
            sizes="32x32"
          />
          <link
            href="/icons/Icon-64.png"
            rel="icon"
            type="image/png"
            sizes="64x64"
          />

          <link rel="canonical" href="https://phatho-folio.now.sh/" />
          <link rel="manifest" href="/manifest.json" />

          <script
            async
            defer
            src="https://www.googletagmanager.com/gtag/js?id=UA-172952138-1"
          />

          <script
            dangerouslySetInnerHTML={{
              __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
            
              gtag('config', 'UA-172952138-1');
              `
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument


1			import React from 'react'
2			import Document, { Html, Head, Main, NextScript } from 'next/document'
3			/*
4			* Some notes:
5			* 1) _document.js will load on server side -> all this meta tag will be fetched by Scraper of Facebook, Linkedin, ...
6			* 2) og:image need to be change name in order for FB to reload the new preview image
7			* 3) sharing on staging env wont work, because og:url is set to main page
8			*/
9			class MyDocument extends Document {
10			static async getInitialProps(ctx) {
11			const initialProps = await Document.getInitialProps(ctx)
12			return { ...initialProps }
13			}
14
15			render() {
16			return (
17			<Html lang="en">
18			<Head>
19			<meta
20			name="viewport"
21			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
22			/>
23			<meta property="og:title" content="DeKal \| Portfolio" />
24			<meta property="og:type" content="website" />
25			<meta
26			property="og:description"
27			content="Dekal's Portfolio and Blog"
28			/>
29			<meta
30			property="og:image"
31			content="https://phatho-folio.now.sh/images/cover-img.png"
32			/>
33			<meta
34			property="og:image:secure_url"
35			content="https://phatho-folio.now.sh/images/cover-img.png"
36			/>
37			<meta property="og:url" content="https://phatho-folio.now.sh/" />
38			<meta property="og:site_name" content="DeKal Portfolio" />
39			<meta property="og:image:alt" content="DeKal Portfolio" />
40			<meta
41			name="google-site-verification"
42			content="ofwBFRuFL3aycSJjDcrhc8hWEPKuJ7LkNCLUrsB0Sj4"
43			/>
44			<meta name="robots" content="index,follow" />
45			<meta name="googlebot" content="index,follow" />
46			<meta name="theme-color" content="#ffffff" />
47			<link rel="icon" href="/favicon.ico" />
48			<link rel="apple-touch-icon" href="/icons/Icon-64.png" />
49			<link
50			rel="preload"
51			href="fonts/ip/font/ip.woff"
52			as="font"
53			crossOrigin=""
54			/>
55			<link
56			href="/icons/Icon-32.png"
57			rel="icon"
58			type="image/png"
59			sizes="32x32"
60			/>
61			<link
62			href="/icons/Icon-64.png"
63			rel="icon"
64			type="image/png"
65			sizes="64x64"
66			/>
67
68			<link rel="canonical" href="https://phatho-folio.now.sh/" />
69			<link rel="manifest" href="/manifest.json" />
70
71			<script
72			async
73			defer
74			src="https://www.googletagmanager.com/gtag/js?id=UA-172952138-1"
75			/>
76
77			<script
78			dangerouslySetInnerHTML={{
79			__html: `
80			window.dataLayer = window.dataLayer \|\| [];
81			function gtag(){dataLayer.push(arguments);}
82			gtag('js', new Date());
83
84			gtag('config', 'UA-172952138-1');
85			`
86			}}
87			/>
88			</Head>
89			<body>
90			<Main />
91			<NextScript />
92			</body>
93			</Html>
94			)
95			}
96			}
97
98			export default MyDocument
99

DeKal / portfolio-next-js

Pull Request — master (#425)

MyDocument.render B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like